<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
	<script type="text/javascript" src="js/public.js"></script>
    <script>
        window.onload = function (){
			var token = sessionStorage.getItem("token");
			if(token == null){
				window.location.href = "/shop/login.html";
			}
			var consumerName = sessionStorage.getItem("consumerName");
			var role = "店长";
			if(sessionStorage.getItem("role") > 1){
							  role = "店员";
			}
			document.getElementById("manager_name").innerText = role+":"+consumerName;
			
            fetch("http://localhost:8080/category/list",{method: 'GET',  
				headers: {  
					'token': sessionStorage.getItem("token"), 
					},  
				})
			
                .then(response => {
                    // 确保服务器返回的是JSON数据
                    if (!response.ok) {
                        throw new Error('Failed to fetch data');
                    }
                    return response.json(); // 将response转换为JSON
                })
                .then(data => {
                    var str = "";
                    for(var i=0;i<data.length;i++) {
                        str += "<option value=\""+data[i].categoryId +"\">" + data[i].categoryName + "</option>";
                    }
                    document.getElementById("categoryId").innerHTML = str;
                })
                .catch(error => {
                    // 处理错误
                    console.error('Error:', error);
                });
        }
		
function addProduct() {  
    const fileInput = document.getElementById('imageUpload');  
    if (!fileInput.files.length) {  
        alert("请选择要上传的图片");  
        return;  
    }  
  
    const formData = new FormData();  
    var aproductName = document.getElementById('productName').value;  
    var acategoryId = document.getElementById('categoryId').value;  
    var aprice = document.getElementById('price').value;  
    var adescription = document.getElementById('description').value;  
    var astockQuantity = document.getElementById('stockQuantity').value;  
  
    if (aproductName == "" || acategoryId == "" || aprice == "" || adescription == "") {  
        alert("必填字段不能为空");  
        return;  
    }  
  
    // 添加非文件数据到FormData  
    formData.append('productName', aproductName);  
    formData.append('categoryId', acategoryId);  
    formData.append('price', aprice);  
    formData.append('description', adescription);  
    formData.append('stockQuantity', astockQuantity);  
  
    // 添加文件到FormData  
    formData.append('image', fileInput.files[0]); // 假设图片字段名为'image'  
  
    // 发送POST请求  
    fetch("http://localhost:8080/product/save", {  
        method: 'POST',  
        headers: {  
            'token': sessionStorage.getItem("token") // 确保你的服务器需要这个token并且位置正确  
        },  
        body: formData // 使用FormData对象发送数据  
    })  
    .then(response => {  
        // 检查响应  
        if (!response.ok) {  
            throw new Error('Failed to add product');  
        }  
        return response.text(); // 或者使用 response.json() 如果后端返回JSON格式的响应  
    })  
    .then(data => {  
        // 处理成功响应  
        alert("商品添加成功");  
        // 在这里可以处理返回的文本或其他数据  
    })  
    .catch(error => {  
        // 处理错误  
        alert("商品添加失败");  
        console.error('Error:', error);  
    });  
}

    </script>
</head>
<body>
<div class="topbar-wrap white">
    <div class="topbar-inner clearfix">
        <div class="topbar-logo-wrap clearfix">
            <h1 class="topbar-logo none"><a href="admin.html" class="navbar-brand">后台管理</a></h1>
            <ul class="navbar-list clearfix">
                <li><a class="on" href="admin.html">首页</a></li>
                <li><a href="admin.html" target="_blank">网站首页</a></li>
            </ul>
        </div>
        <div class="top-info-wrap">
            <ul class="top-info-list clearfix">
                <li><a href="store.html" id= "manager_name">管理员</a></li>
                <li><a href="password.html">修改密码</a></li>
                <li><a href="#" onclick="logout()">退出</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container clearfix">
    <div class="sidebar-wrap">
        <div class="sidebar-title">
            <h1>菜单</h1>
        </div>
        <div class="sidebar-content">
            <ul class="sidebar-list">
                <li>
                    <a href="#"><i class="icon-font">&#xe003;</i>常用操作</a>
                    <ul class="sub-menu">
                        <li><a href="product.html"><i class="icon-font">&#xe008;</i>商品管理</a></li>
                        <li><a href="order.html"><i class="icon-font">&#xe005;</i>订单管理</a></li>
						<li><a href="insert.html"><i class="icon-font">&#xe005;</i>商品新增</a></li>
						<li><a href="category.html"><i class="icon-font">&#xe005;</i>类型管理</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="icon-font">&#xe018;</i>系统管理</a>
                    <ul class="sub-menu">
                        <li><a href="store.html"><i class="icon-font">&#xe017;</i>店铺信息设置</a></li>
						<li><a href="manager.html"><i class="icon-font">&#xe017;</i>个人信息设置</a></li>
						<li><a href="members.html"><i class="icon-font">&#xe017;</i>店铺成员信息</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!--/sidebar-->
    <div class="main-wrap">

        <div class="crumb-wrap">
            <div class="crumb-list"><i class="icon-font"></i><a href="admin.html">首页</a><span class="crumb-step">&gt;</span><a class="crumb-name" href="/jscss/admin/design/">商品管理</a><span class="crumb-step">&gt;</span><span>新增商品</span></div>
        </div>
        <div class="result-wrap">
            <div class="result-content">
                    <table class="insert-tab" width="100%">
                        <tbody><tr>
                            <th width="120"><i class="require-red">*</i>分类：</th>
                            <td>
                                <select name="categoryId" id="categoryId" class="required">
                                    <option value="">请选择</option>
                                    <option value="1">干果</option>
                                    <option value="0">鲜果</option>
                                </select>
                            </td>
                        </tr>
                            <tr>
                                <th><i class="require-red">*</i>商品名称：</th>
                                <td>
                                    <input class="common-text required" id="productName" name="productName" size="50" type="text">
                                </td>
                            </tr>
							<tr>
                                <th>价格：</th>
                                <td><input class="common-text" name="price" id="price" size="50" value="" type="text"></td>
                            </tr>
							<tr>
							    <th>库存：</th>
							    <td><input class="common-text" name="stockQuantity" id="stockQuantity" size="50" value="" type="text"></td>
							</tr>
                           <tr>
                              <th><i class="require-red">*</i>缩略图：</th>
                               <td><input type="file" id="imageUpload" name="imageUpload" accept="image/*"></td> 
                           </tr>
                            <tr>
                                <th>描述：</th>
                                <td><textarea name="description" class="common-textarea" id="description" cols="30" style="width: 98%;" rows="10" ></textarea></td>
                            </tr>
                            <tr>
                                <th></th>
                                <td>
                                    <input class="btn btn-primary btn6 mr10" value="提交" type="submit" onclick="addProduct()">
                                    <input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
                                </td>
                            </tr>
                        </tbody></table>
            </div>
        </div>

    </div>
    <!--/main-->
</div>
</body>
</html>